<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>02 SvgTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/XType.js"></script>
    <script>
        // 创建管理器
        var SVG = new XType.Manager();

        // SVG文档
        function SvgDom(options = {}) {
            XType.SvgControl.call(this, options);
        }

        SvgDom.prototype = Object.create(XType.SvgControl.prototype);
        SvgDom.prototype.constructor = SvgDom;

        SvgDom.prototype.render = function () {
            var dom = this.createElement('svg');
            this.renderDom(dom);
        };

        SVG.addXType('dom', SvgDom);

        // SVG圆
        function SvgCircle(options = {}) {
            XType.SvgControl.call(this, options);
        }

        SvgCircle.prototype = Object.create(XType.SvgControl.prototype);
        SvgCircle.prototype.constructor = SvgCircle;

        SvgCircle.prototype.render = function () {
            var dom = this.createElement('circle');
            this.renderDom(dom);
        };

        SVG.addXType('circle', SvgCircle);

        // 渲染svg文档
        var dom = SVG.create({
            xtype: 'dom',
            id: 'dom1',
            attr: {
                width: 800,
                height: 600,
            },
            parent: document.body,
            children: [{
                xtype: 'circle',
                attr: {
                    cx: 100,
                    cy: 100,
                    r: 40,
                    fill: '#f00',
                    stroke: '#000',
                    'stroke-width': 2
                },
                listeners: {
                    click: () => {
                        alert('You clicked');
                    }
                }
            }]
        });
        dom.render();
    </script>
</body>

</html>